<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-md-12">
        <b-card>
          <div slot="header">
            <strong>展会信息详情</strong>
          </div>
          <b-form-fieldset label="展会名称：" :label-cols="2" :horizontal="true">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="title" name="title"></b-form-input>
            <span class="tips">*</span>
            <p class="tips" v-show="isTip1">展会名称不能为空，请选择！</p>
          </b-form-fieldset>
          <b-form-fieldset label="日期：" :label-cols="2" :horizontal="true">
            <!--<b-form-input type="text" :disabled="isEdit" placeholder="" v-model="dates" name="dates"></b-form-input>-->
            <b-form-input type="date" :disabled="isEdit" placeholder="" v-model="dates" name="dates"></b-form-input>
            <span class="tips">*</span>
            <p class="tips" v-show="isTip2">日期不能为空，请选择！</p>
          </b-form-fieldset>
          <b-form-fieldset label="链接：" :label-cols="2" :horizontal="true">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="link" name="link"></b-form-input>
          </b-form-fieldset>
          <b-form-fieldset label="地点：" :label-cols="2" :horizontal="true">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="venue" name="venue"></b-form-input>
            <span class="tips">*</span>
            <p class="tips" v-show="isTip3">地点不能为空，请填写！</p>
          </b-form-fieldset>
          <b-form-fieldset label="创建时间：" :label-cols="2" :horizontal="true" v-show="isShowTime">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="createTime" name="createtime"></b-form-input>
          </b-form-fieldset>
          <b-form-fieldset label="更新时间：" :label-cols="2" :horizontal="true" v-show="isShowTime">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="updateTime" name="updatetime"></b-form-input>
          </b-form-fieldset>
          <b-form-fieldset label="更新人：" :label-cols="2" :horizontal="true" v-show="isShowTime">
            <b-form-input type="text" :disabled="isEdit" placeholder="" v-model="updateUser" name="updateUser"></b-form-input>
          </b-form-fieldset>
          <div slot="footer">
            <b-button type="submit" size="sm" variant="primary" @click="backRfi()" v-show="isBack">
              <i class="fa fa-dot-circle-o"></i> 返回
            </b-button>
            <b-button type="submit" size="sm" variant="primary" @click="submitInfo()" v-show="isSubmit">
            <i class="fa fa-dot-circle-o"></i> 提交
          </b-button>
          </div>
        </b-card>
      </div>
    </div>
    <div title="Modal title" class="modal-primary" v-model="primaryModal" v-show="primaryModal">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title">展会信息</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelAddEdit">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body">
                <br>是否编辑该条展会信息？<br><br>
              </div>
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelAddEdit()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="sureAddEdit()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '../../service/date'
  import { findEventById, editEvent, addEvent } from '../../service/api'
  export default {
    name: 'forms',
    data () {
      return {
        title: '',
        dates: '',
        link: '',
        venue: '',
        createTime: '',
        updateTime: '',
        updateUser: '',
        isEdit: false,
        isBack: false,
        isSubmit: false,
        primaryModal: false,
        isTip1: false,
        isTip2: false,
        isTip3: false,
        isShowTime: false
      }
    },
    methods: {
      backRfi () {
        this.$router.push({
          path: '/news/exhibition'
        })
      },
      findEventByIds () {
        findEventById({id: this.$route.query.id})
          .then(({ data, err }) => {
            console.log('err: ' + err)
            console.log('data: ' + data)
            if (data.code === 200) {
              this.dates = data.result.dates
              this.title = data.result.title
              this.link = data.result.link
              this.venue = data.result.venue
              this.createTime = data.result.createdate
              if (data.result.updatetime !== null) {
                this.updateTime = formatDate(new Date(data.result.updatetime.time), 'yyyy-MM-dd hh:mm:ss')
              }
              this.updateUser = data.result.updateUser
            }
          })
      },
      // 判断是否填写内容
      isTips () {
        if (!this.title.trim()) {
          this.isTip1 = true
          return false
        } else {
          this.isTip1 = false
        }
        if (!this.dates.trim()) {
          this.isTip2 = true
          return false
        } else {
          this.isTip2 = false
        }
        if (!this.venue.trim()) {
          this.isTip3 = true
          return false
        } else {
          this.isTip3 = false
        }
        return true
      },
      submitInfo () {
        if (this.isTips()) {
          this.primaryModal = true
        } else {
          this.primaryModal = false
        }
      },
      async editEvent () {
        const fd = new FormData()
        fd.append('id', this.$route.query.id)
        fd.append('title', this.title)
        fd.append('dates', this.dates)
        fd.append('link', this.link)
        fd.append('venue', this.venue)
        fd.append('updateUser', localStorage.getItem('username'))
        const { err, data } = await editEvent({ fd })
        if (err || data.code !== 200) {
          this.primaryModal = false
          alert('修改失败！')
          return false
        }
        this.primaryModal = false
        alert('修改成功！')
        this.$router.go(-1)
      },
      async addEvent () {
        const fd = new FormData()
        fd.append('title', this.title)
        fd.append('dates', this.dates)
        fd.append('link', this.link)
        fd.append('venue', this.venue)
        fd.append('updateUser', localStorage.getItem('username'))
        const { err, data } = await addEvent({ fd })
        if (err || data.code !== 200) {
          this.primaryModal = false
          alert('添加失败！')
          return false
        }
        this.primaryModal = false
        alert('添加成功！')
        this.$router.go(-1)
      },
      cancelAddEdit () {
        this.primaryModal = false
      },
      sureAddEdit () {
        // flag：2 编辑  flag：3 添加
        if (this.$route.query.flag === '2') {
          this.editEvent()
        }
        if (this.$route.query.flag === '3') {
          this.addEvent()
        }
      }
    },
    created () {
      // flag：1 查看
      if (this.$route.query.flag === '1') {
        this.isEdit = true
        this.isBack = true
        this.isShowTime = true
        this.findEventByIds()
      }
      // flag：2 编辑
      if (this.$route.query.flag === '2') {
        this.isEdit = false
        this.isSubmit = true
        this.isShowTime = false
        this.findEventByIds()
      }
      // flag：3 添加
      if (this.$route.query.flag === '3') {
        this.isEdit = false
        this.isSubmit = true
        this.isShowTime = false
      }
    }
  }
</script>
<style>
  .form-control {
    display: inline-block;
    width: 97%;
  }
  .tips{
    color: #f20000;
  }
</style>
